<template>
  <mu-appbar style="width: 100%;" color="primary">
    {{title}}
    <mu-menu slot="right">
      <mu-button flat>
        <mu-icon value="reorder"></mu-icon>
      </mu-button>
      <mu-list slot="content">
        <mu-list-item button v-for="(items,index) in menu" :key="index" @click="goMenu(index)">
          <mu-list-item-content>
            <mu-list-item-title>
                {{items.name}}
            </mu-list-item-title>
          </mu-list-item-content>
        </mu-list-item>
      </mu-list>
    </mu-menu>
  </mu-appbar>
</template>

<script>
  export default {
    name: "commonTop",
    props: [
      'title',
    ],
    data() {
      return {
        menu: [
          {name: '随手记', to: "/record", icon: 'create'},
          {name: '发心情', to: '/method', icon: 'details'},
          {name: '推好物', to: '/share', icon: 'straighten'},
          {name: '美文集', to: '/article', icon: 'import_contacts'},
          {name: '趣段子', to: '/joke', icon: 'library_books'}
        ]
      }
    },
    methods: {
      goMenu(index) {
        this.$router.push({path: this.menu[index].to})
      }
    }
  }
</script>

<style scoped>

</style>
